<template>
	<view class="content">
		<view class="section-0" >
			<view class="section-body">
				<view class="frequency">{{user_name}} <text>{{renderDate()}}</text>会议</view>
			</view>
		</view>
		<view class="section-1">
			<view class="list">
				<view @click="go(item)" class="item" v-for="item in list" :key="item.id">
					<view class="text">
						<view class="poss">{{item.project_name}}</view>
						<view class="iconfont icon-xiangyou1"></view>
					</view>
					<view class="text-1">{{item.meeting_name}}</view>
					<view class="text-1">{{item.meeting_time.substring(0, 10)}}<text style="margin-left: 20rpx;">{{item.meeting_duration}}分钟</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { performMeettingListDetailApi } from '@/api/statistics.js';
	import { mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			return {
				user_name: '',
				list:[],
				type: 1,
				show:'',
				nick_name:''
			};
		},
		computed: {
			...mapGetters({start_time: 'duty/getStartTime', end_time: 'duty/getEndTime'})
		},
		methods:{
			renderDate() {
				let str = ''
				if (this.type == 1) {
					str = '本日';
				}
				if (this.type == 2) {
					str = '本周';
				}
				if (this.type == 3) {
					str = '本月';
				}
				if (this.type == 4) {
					str = '全部';
				}
				return str;
			},
			go(item) {
				uni.navigateTo({
					url: "/pages/statistics/comprehensive/duty/meeting/list/info/index?id=" + item.id + '&show=' + this.show
				})
			},
			async fetchData() {
				uni.showLoading({title: '加载中...'});
				const { data } = await performMeettingListDetailApi({
					user_name: this.user_name,
					time_type: this.type,
				});
				uni.hideLoading();
				if (data.code === 1) {
					this.list = data.data;
					this.list.sort(function (a, b) {
                     return a.meeting_time < b.meeting_time ? 1 : -1;
                   })
				 console.log(this.list);
				} 
			}
		},
		onLoad(data) {
			this.show = data.show
			this.nick_name = data.nick_name
			if(this.show == 1){
				this.user_name = this.nick_name
				this.type = 4
			}else{
				this.user_name = data.nick_name
				this.type = data.time_type
			}
			
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '本日会议'
				})
			} else if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '本周会议'
				})
			} else if (this.type == 3) {
				uni.setNavigationBarTitle({
					title: '本月会议'
				})
			} else if (this.type == 4) {
				uni.setNavigationBarTitle({
					title: '全部会议'
				})
			}
		},
		onReady() {
			this.fetchData();
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #fff;
	}
	.section-1{
		position: relative;
		top: -50rpx;
		z-index: 10;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.list{
			width: 670rpx;
			box-sizing: border-box;
			margin-left: 40rpx;
			border-top: 2rpx solid #d8e4f2;
			.item{
				width: 100%;
				border-bottom: solid 2rpx #f2f2f0;
				letter-spacing: 2rpx;
				color: #3b3c40;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				padding-top: 17rpx;
				padding-bottom: 20rpx;
				.text{
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					font-stretch: normal;
					.poss{
						width: 90%;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.text-1{
					width: 100%;
					font-size: 14rpx;
					color: #7b9bb2;
				}
			}
		}
		
	}
	.section-0{
		width: 100%;
		background-color: #2e5efe;
		.section-body{
			width: 100%;
			padding-left: 40rpx;
			height: 150rpx;
			padding-right: 40rpx;
			padding-bottom: 50rpx;
			background-color: #1534ce;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			.frequency{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 26rpx;
				color: #87c6ff;
				span{
					color: #fff;
				}
			}
			.item{
				width: 33.33%;
				float: left;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				padding-top: 40rpx;
				height: 100rpx;
				position: relative;
				.shape{
					width: 4rpx;
					height: 84rpx;
					background-image: linear-gradient(rgba(#3658f2, 0.3) 0%, #3658f2 30%, #3658f2 70%, rgba(#3658f2, 0.3) 100%,);
					position: absolute;
					right: 0;
					top: 48rpx;
				}
				.top{
					width: 100%;
					text-align: center;
					font-size: 16rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #95c4fa;
				}
				.bottom{
					width: 100%;
					text-align: center;
					font-size: 58rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #ffde00;
				}
			}
		}
	}
</style>
